<!-- 行情页面 -->
<template>
	<view class="container">
		<view class="market-content">
			<view class="tab_nav">
				<view class="navTitle" v-for="(item,index) in navList" :key="index">
					<view :class="{'active':isActive === index}" @click="checked(index)">
						{{item.title}}
					</view>
				</view>
			</view>
			<view class="tab-content">
				<view class="contenttile">名称</view>
				<view class="contentcolor-one">最新价</view>
				<view class="contentcolor-two">涨幅</view>
			</view>

			<!-- 涨幅榜-start -->
			<view class="nav_item" v-if="isActive==0">
				<view class="liststock">
					<view class="section-list" v-for="(liststock,index) in listStock">
						<view class="left-list">
							<view class="left-list-text">
								<text :class="liststock.numbering.substring(0,2)">{{liststock.numbering.substring(0,2) }}</text>
								<text>{{liststock.name}}</text>
							</view>
							<view class="left-list-num">{{liststock.numbering}}</view>
						</view>
						<view v-if="parseFloat(liststock.change)< 0 ? liststockcolor='warpgreen' : liststockcolor='warpred'"
							class="liststock-price">
							<text :class="liststockcolor">{{liststock.Price}}</text>
						</view>
						<view class="right-list"
							v-if="parseFloat(liststock.change)< 0 ? liststockbackcolor='backgreen' : liststockbackcolor='backred'">
							<view :class="liststockbackcolor">
								{{liststock.change}}%
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 涨幅榜-end -->

			<!-- 跌幅榜-start -->
			<view class="nav_item" v-if="isActive==1">
				<!-- 内容 -->
				<view class="liststock">
					<view class="section-list" v-for="(listdecline,index) in listDecline">
						<view class="left-list">
							<view class="left-list-text">
								<text :class="listdecline.numbering.substring(0,2)">{{listdecline.numbering.substring(0,2) }}</text>
								<text>{{listdecline.name}}</text>
							</view>
							<view class="left-list-num">{{listdecline.numbering}}</view>
						</view>
						<view v-if="parseFloat(listdecline.change)< 0 ? liststockcolor='warpgreen' : liststockcolor='warpred'"
							class="liststock-price">
							<text :class="liststockcolor">{{listdecline.Price}}</text>
						</view>
						<view class="right-list"
							v-if="parseFloat(listdecline.change)< 0 ? liststockbackcolor='backgreen' : liststockbackcolor='backred'">
							<view :class="liststockbackcolor">
								{{listdecline.change}}%
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 涨幅榜-end -->

			<!-- 热门榜-start -->
			<view class="nav_item" v-if="isActive==2">
				<!-- 内容 -->
				<view class="liststock">
					<view class="section-list" v-for="(listpopular,index) in listPopular">
						<view class="left-list">
							<view class="left-list-text">
								<text :class="listpopular.numbering.substring(0,2)">{{listpopular.numbering.substring(0,2) }}</text>
								<text>{{listpopular.name}}</text>
							</view>
							<view class="left-list-num">{{listpopular.numbering}}</view>
						</view>
						<view v-if="parseFloat(listpopular.change)< 0 ? liststockcolor='warpgreen' : liststockcolor='warpred'"
							class="liststock-price">
							<text :class="liststockcolor">{{listpopular.Price}}</text>
						</view>
						<view class="right-list"
							v-if="parseFloat(listpopular.change)< 0 ? liststockbackcolor='backgreen' : liststockbackcolor='backred'">
							<view :class="liststockbackcolor">
								{{listpopular.change}}%
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 热门榜-end -->

			<!-- 自选-start -->
			<view class="nav_item" v-if="isActive==3">
				<!-- 内容 -->
				<view class="liststock">
					<view class="section-list" v-for="(listoptional,index) in listOptional">
						<view class="left-list">
							<view class="left-list-text">
								<text :class="listoptional.numbering.substring(0,2)">{{listoptional.numbering.substring(0,2) }}</text>
								<text>{{listoptional.name}}</text>
							</view>
							<view class="left-list-num">{{listoptional.numbering}}</view>
						</view>
						<view v-if="parseFloat(liststock.rise)< 0 ? liststockcolor='warpgreen' : liststockcolor='warpred'"
							class="liststock-price">
							<text :class="liststockcolor">{{listoptional.price}}</text>
						</view>
						<view class="right-list"
							v-if="parseFloat(listoptional.rise)< 0 ? liststockbackcolor='backgreen' : liststockbackcolor='backred'">
							<view :class="liststockbackcolor">
								{{listoptional.change}}%
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 自选-end -->
		</view>
		
		<!-- 弹窗-start -->
		<Popup :Showhide='Showhide'></Popup>
		<!-- 弹窗-end -->
	</view>
</template>

<script>
	import Popup from "@/components/Popup/Popup.vue"
	import request from "@/api/request.js"
	export default {
		data() {
			return {
				Showhide:'',
				isActive: 0,
				navList: [{
						index: 0,
						title: '涨幅榜'
					}, {
						index: 1,
						title: "跌幅榜"
					}, {
						index: 2,
						title: "热门榜"
					},
					{
						index: 3,
						title: "自选"
					}
				],
				listStock: [],
				listDecline:[],
				listPopular:[],
				listOptional:[]
			}
		},
		components:{
			Popup
		},
		methods: {
			checked(index) {
				this.isActive = index
			},
		},
		// 生命周期函数接收路由传值
		onLoad(options) {
			this.Showhide=options.addon
			// console.log(options.addon);
			
			// 进行后端数据请求
			// 涨幅榜的，type=1
			request.get('/api/index/getStockRank?type=1')
			.then((res) => {
				// console.log(res.msg);
				this.listStock=res.msg
			})
			.catch((error) => {
				console.log(error);
			})
			// 跌幅榜的，type=2
			request.get('/api/index/getStockRank?type=2')
			.then((res) => {
				// console.log(res.msg);
				this.listDecline=res.msg
			})
			.catch((error) => {
				console.log(error);
			})
			
			// 热门榜，
			request.get('/api/index/StockHotList?number=20')
			.then((res) => {
				console.log(res.msg);
				this.listPopular=res.msg
			})
			.catch((error) => {
				console.log(error);
			})
		},
	}
</script>

<style lang="scss">
	.container {
		position: absolute;
		background: #f2f2f2;
		color: #282828;
		height: 100%;
		width: 100%;
		margin: 0px;
		padding: 0px;
		padding-bottom: 3rem;
		padding-top: 0.5rem !important;

		.market-content {
			background-color: #ffffff;
		}
	}


	.tab-content {
		text-align: center;
		color: #999999;
		font-size: 0.65rem;
		padding: 0.3rem 0.6rem;
		display: flex;
		justify-content: space-between;
		line-height: 1.5rem;

		.contenttile {
			width: 40%;
			text-align: left;
		}

		.contentcolor-one {
			color: #ff6161;
			width: 20%;
			text-align: right;
		}

		.contentcolor-two {
			color: #ff6161;
			width: 40%;
			text-align: right;
		}
	}


	// 这是代码块的css-start
	.tab_nav {
		display: flex;
		justify-content: center;
		align-items: center;
		border-bottom: 1px solid #f1f1f1;

		.navTitle {
			height: 90rpx;
			line-height: 90rpx;
			width: 100%;
			text-align: center;
			font-size: 0.9rem;
			font-family: Alibaba PuHuiTi;
			color: #333;
			font-weight: bold !important;
		}

		.active {
			position: relative;
			color: #ea5504;
		}

		.active::after {
			content: "";
			position: absolute;
			width: 100rpx;
			height: 4rpx;
			background-color: #ea5504;
			left: 0px;
			right: 0px;
			bottom: 0px;
			margin: auto;
		}
	}

	// 这是代码块的css-end

	// list列表-start
	.liststock {
		background-color: #fff;


		.section-list {
			display: flex;
			padding: 0.3rem 0.6rem;
			justify-content: space-between;
			align-items: center;
			border-top: 1px solid #f1f1f1;


			.left-list {
				display: flex;
				flex-direction: column;
				width: 40%;

				.left-list-text {
					color: #333333;
					font-size: 0.8rem;
					line-height: 1.5rem;
				}


				.left-list-num {
					color: #999999 !important;
					font-size: 0.6rem !important;
					line-height: 1.5;
				}

			}

			.liststock-price {
				width: 20%;
				text-align: right;
			}

			.right-list {
				width: 40%;
				display: flex;
				flex-direction: row-reverse;

				.right-list-text {
					width: 50% !important;
					background-color: #ea5504;
					color: #ffffff;
					width: 3.5rem;
					font-size: 0.7rem;
					text-align: center;
					line-height: 1rem;
				}
			}
		}
	}

	.sz {
		background: #9b79ea;
		color: #fff !important;
		border-radius: 0.1rem;
		font-size: 0.5rem !important;
		padding: 0 0.2rem;
		margin-right: 0.3rem;
	}

	.sh {
		background: #f33841;
		color: #fff !important;
		border-radius: 0.1rem;
		font-size: 0.5rem !important;
		padding: 0 0.2rem;
		margin-right: 0.3rem;
	}

	.bj {
		background: #4474BB;
		color: #fff !important;
		border-radius: 0.1rem;
		font-size: 0.5rem !important;
		padding: 0 0.2rem;
		margin-right: 0.3rem;
	}

	.warpgreen {
		color: #58bd6f !important;
	}

	.warpred {
		color: #ff6161 !important;
	}

	.backgreen {
		width: 50% !important;
		background-color: #58bd6f;
		color: #ffffff;
		width: 3.5rem;
		font-size: 0.7rem;
		text-align: center;
		line-height: 1rem;
	}

	.backred {
		width: 50% !important;
		background-color: #ff6161;
		color: #ffffff;
		width: 3.5rem;
		font-size: 0.7rem;
		text-align: center;
		line-height: 1rem;
	}

	//list列表-end
</style>